<template>
    <!-- 商品组 -->
    <view class="diy-bargainGoods" :style="'background: ' + itemStyle.background + ';'">
        <view class="goods-item dis-flex" v-for="(dataItem, index) in dataList" :key="index">
            <form @submit="_onTargetGoods">
                <button formType="submit" class="btn-normal dis-flex" :data-id="dataItem.active_id">
                    <view class="goods-item--container dis-flex">
                        <!-- 商品图片 -->
                        <view class="goods-image">
                            <image class="image" :src="dataItem.goods_image"></image>
                        </view>
                        <view class="goods-info">
                            <!-- 商品名称 -->
                            <view class="goods-name">
                                <text class="twolist-hidden">{{ dataItem.goods_name }}</text>
                            </view>
                            <!-- 参与的用户头像 -->
                            <view v-if="dataItem.helps_count > 0" class="peoples dis-flex">
                                <view class="user-list dis-flex">
                                    <view class="user-item-avatar" v-for="(help, index1) in dataItem.helps" :key="index1">
                                        <image class="image" :src="help.user.avatarUrl"></image>
                                    </view>
                                </view>
                                <view class="people__text">
                                    <text>{{ dataItem.helps_count }}人正在砍价</text>
                                </view>
                            </view>
                            <!-- 商品原价 -->
                            <view class="goods-price">
                                <text>￥{{ dataItem.original_price }}</text>
                            </view>
                            <!-- 砍价低价 -->
                            <view class="floor-price">
                                <text class="small">最低￥</text>
                                <text class="big">{{ dataItem.floor_price }}</text>
                            </view>
                            <!-- 操作按钮 -->
                            <view class="opt-touch">
                                <view class="touch-btn">
                                    <text>立即参加</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </button>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            dataItem: {
                active_id: '',
                goods_image: '',
                goods_name: '',
                helps_count: 0,
                helps: [],
                original_price: '',
                floor_price: ''
            },

            help: {
                user: {
                    avatarUrl: ''
                }
            }
        };
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        itemStyle: Object,
        params: Object,
        dataList: Object
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转商品详情页
         */
        _onTargetGoods(e) {
            // 记录formid
            app.saveFormId(e.detail.formId);
            uni.navigateTo({
                url: `/pages/bargain/goods/index?active_id=${e.detail.target.dataset.id}`
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */

/* 砍价商品 */

.goods-item {
    margin-bottom: 20rpx;
    background: #fff;
    padding: 20rpx 16rpx;
}

.goods-item:last-child {
    margin-bottom: 0;
}

.goods-item .goods-image .image {
    display: block;
    width: 220rpx;
    height: 220rpx;
}

.goods-item .goods-info {
    width: 498rpx;
    padding-top: 8rpx;
    margin-left: 15rpx;
    position: relative;
}

.goods-item .goods-info .goods-name {
    font-size: 28rpx;
    min-height: 60rpx;
}

/* 正在参与的用户 */

.goods-item .goods-info .peoples {
    margin-top: 15rpx;
}

.goods-item .goods-info .peoples .user-list {
    margin-right: 10rpx;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar {
    margin-left: -8rpx;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
    margin-left: 0;
}

.goods-item .goods-info .peoples .user-list .user-item-avatar .image {
    display: block;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
}

.goods-item .goods-info .peoples .people__text {
    font-size: 24rpx;
    color: #818181;
}

/* 商品原价 */

.goods-item .goods-info .goods-price {
    margin-top: 15rpx;
    color: #818181;
    font-size: 25rpx;
    text-decoration: line-through;
}

/* 砍价底价 */

.goods-item .goods-info .floor-price {
    color: #fc1e56;
}

.goods-item .goods-info .floor-price .small {
    font-size: 24rpx;
}

.goods-item .goods-info .floor-price .big {
    font-size: 32rpx;
}

/* 立即参加按钮 */

.opt-touch {
    position: absolute;
    bottom: 0;
    right: 10rpx;
}

.touch-btn {
    color: $uni-text-color-inverse;
    font-size: 28rpx;
    background: #d3a975;
    border-radius: 30rpx;
    padding: 10rpx 28rpx;
}
</style>
